page {
  background-color: var(--bg-color);
  background: var(--linear-gradient);
}

.DIY-box {font-family: 'MyFont-BiboBody';}

.DIY-box .title-box {
  display: flex;
  justify-content: center;
}

.DIY-box .title-box text {
  font-style: italic;
  font-size: 52rpx;
  color: #AF7E62;
  font-weight: 700;font-family: 'MyFont-BiboBody';
}

.DIY-box .title-box .cart-box {
  position: absolute;
  right: 10px;
  display: flex;
  flex-direction: column;
}

.DIY-box .title-box .cart-box .icon {
  width: 65rpx;
  height: 65rpx;
}

.DIY-box .title-box .cart-box text {
  background-color: #ccc;
  font-size: 26rpx;
  text-align: center;
  background-color: #AF7E62;
  color: #fff;
  border-radius: 25rpx;
  transform: translateY(-5px);
  font-style: normal;
}

.body-box {
  display: flex;
  justify-content: center;
  position: relative;
  height: 35vh;
}

.body-box .body-show {
  width: 45vw;
  position: absolute;
  height: 100%;
  left: 50%;
  bottom: -15rpx;
  margin-left: -22.5vw;
}

.body-box .body-show image {
  width: 100%;
  height: 100%;
}

.body-box .box {
  width: 87vw;
}

.body-box .box .pos {
  width: 100%;
  height: 100%;
}

.foot-box {
  display: flex;
  justify-content: center;
}

.foot-box .box {
  width: 422rpx;
}

.foot-box .box1 {
  width: 422rpx;
  height: 20rpx;
  background: linear-gradient(90deg, #F7DECE 0%, #FFEEE2 24%, #FFEEE2 52%, #EFC5B4 85%, #EAB29B 98%);
  box-shadow: inset 0rpx 2rpx 2rpx 0rpx #FDCAB4, 0rpx 1rpx 2rpx 0rpx #C98368;
  border-radius: 0rpx 0rpx 0rpx 0rpx;
}

.foot-box .box2 {
  width: 422rpx;
  height: 100rpx;
  background: linear-gradient(180deg, #F7DECE 0%, rgba(239, 247, 254, 0) 100%);
  border-radius: 0rpx 0rpx 0rpx 0rpx;
}

/* 部件控制区 */

.parts-box {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: 10;
}

.parts-box .part {
  transform: scale(0.98);
  position: absolute;
  width: 92rpx;
}

.parts-box .part .box {
  width: 82rpx;
  height: 82rpx;
  border: 3px solid rgba(255, 255, 255, 0.37);
  border-radius: 50%;
  position: relative;
  display: flex;box-shadow: 0 0 0 5rpx #ffffffab; /* 内圈颜色（通过阴影实现） */
}

.parts-box .part .box .cirque {
  width: 100%;height: 100%;
  border-radius: 50%;
}

.parts-box .part .box .cirque image {
  width: 100%;
  height: 100%;
}

.parts-box .part text {
  position: absolute;
  width: 130%;
  bottom: -50%;
  left: -15%;
  font-weight: 500;
  font-size: 28rpx;
  color: #000000;
  line-height: 28rpx;
  text-align: center;
  font-style: normal;
}

.parts-box .part1 {
  top: 22.5%;
  left: 8.5%;
  animation: pulse 2.9s infinite ease-in-out;
}

.parts-box .part2 {
  top: 15%;
  right: 15%;
  animation: pulse 3.2s infinite ease-in-out;
}

.parts-box .part3 {
  bottom: 16.5%;
  left: 18.5%;
  animation: pulse 2.5s infinite ease-in-out;
}

.parts-box .part4 {
  bottom: 18.5%;
  right: 13.5%;
  animation: pulse 3.5s infinite ease-in-out;
}

.parts-box .part .box.active .cirque {
  background-color: #fff;
}


/* 关键帧动画 */
@keyframes pulse {
  0% {
    transform: scale(0.95);
    opacity: 0.8;
  }

  50% {
    transform: scale(0.85);
    opacity: 1;
  }

  100% {
    transform: scale(0.95);
    opacity: 0.8;
  }
}

/* 指示线控制区 */

.lines-box {
  position: absolute;
  width: 100%;
  height: 100%;
  left: 0;
  bottom: 0;
  z-index: 5;
}

.lines-box .line {
  position: absolute;
  width: 150rpx;
  height: 85rpx;
}

.lines-box .line1 {
  width: 102rpx;
  height: 57rpx;
  top: 32.5%;
  left: 18.5%;
}

.lines-box .line2 {
  width: 102rpx;
  height: 57rpx;
  top: 15%;
  right: 25%;
}

.lines-box .line3 {
  width: 109rpx;
  height: 106rpx;
  bottom: 5%;
  left: 28.5%;
}

.lines-box .line4 {
  width: 132rpx;
  height: 38rpx;
  bottom: 28.5%;
  right: 23.5%;
}

.lines-box .line image {
  width: 100%;
  height: 100%;
}

.lines-box {}

/* 商品展示区 */
.good-scroll {
  padding: 0 25rpx;
}

.scroll-box {
  border-radius: 15rpx;
  background-color: #fff;
  padding: 10rpx 15rpx;
  box-shadow: 10rpx 5rpx 5rpx rgba(204, 204, 204, 0.548);border: 1px solid rgb(240, 240, 240);
}

.goods-list {
  display: flex;
}

.goood-item {
  position: relative;
  margin:0 15rpx;
}

.goood-item .buy-box {
  position: absolute;
  top: 15rpx;
  right: 15rpx;
  z-index: 10;
}

.goood-item .buy-box .icon {
  width: 50rpx;
  height: 50rpx;
}

.goood-item .thumb {
  width: 195rpx;
  height: 210rpx;
}

.goood-item .thumb .pic {
  max-width: 100%;
  max-height: 100%;
}

.goood-item .title-box {
  width: 100%;
  text-align: center;
  font-size: 28rpx;
  padding: 5rpx 0 0 0;
}

.goood-item .title-box .tit {
  display: block;
}

.goood-item .title-box .price {
  font-size: 25rpx;
  color: rgb(124, 122, 122);
}

.tips-float {
  background-color: #AF7E62;
  display: flex;
  width: 150rpx;
  position: relative;
  border-radius: 12.5rpx;
  height: 50rpx;
  align-items: center;
  padding: 0 5rpx 0 10rpx;
}

.tips-float .icon {
  width: 32rpx;
  height: 32rpx;
}

.tips-float text {
  color: rgb(255, 255, 255);
  font-size: 25rpx;
  padding: 0 5rpx;
  line-height: 1;
}

.tips-float .arrow-down {
  width: 0;
  height: 0;
  border-left: 5px solid transparent;
  border-right: 5px solid transparent;
  border-top: 5px solid #AF7E62;
  position: absolute;
  bottom: -10rpx;
  left: 50%;
  margin-left: -10rpx;
}